<template>
    <!-- Your template code here -->

    <div>
        <van-search v-model="value" show-action label="电话" placeholder="请输入好友电话" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
        <div v-for="item in resimageList">
            <div class="mb-4">
                <div class="text-xl font-sans font-semibold">
                    <span> {{ item[0].imagedesp }}</span>
                </div>
                <div class="flex flex-wrap">
                    <div v-for="(el, indexmin) in item">
                        <van-image class="w-28 h-32 mr-0.5 mb-0.5" @click="onimage(item, indexmin)"
                         :src="el.image"></van-image>
                    </div>
                </div>
            </div>
        </div>
        <van-image-preview @long-press="onlongpress(images)" v-model:show="show" :images="images">
            <template v-slot:index>第{{ index + 1 }}页</template>
        </van-image-preview>
        <ActionSheet :show='showaction' :actions='actions' :onSelect=onSelect />
        <!-- <button>长按</button> -->
    </div>
</template>
<script setup>
import { ref } from 'vue';
import common from '../../api/common';
import { showImagePreview, ActionSheet } from 'vant';
let value = ref('');
let imags = ref([]);
let images = ref([]);
let resimageList = ref([]);
let show = ref(false);
let showaction = ref(false);
let index = ref(0);
const actions = [{ name: '保存图片', icon: 'down' }, { name: '取消' }];
let onimage = (el, indexmin) => {
    // showImagePreview({
    images.value = el.map((item) => item.image),
        index.value = indexmin;
    show.value = true;
};
let saveImage = (imageUrl, imageName = 'downloaded-image') => {
    // 创建一个图片元素
    const img = new Image();
    img.crossOrigin = 'Anonymous'; // 处理跨域问题（如果图片是跨域加载的）

    img.onload = function () {
        // 创建一个 canvas 元素
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');

        // 将图片绘制到 canvas 上
        ctx.drawImage(img, 0, 0);

        // 将 canvas 内容转换为 Blob
        canvas.toBlob(function (blob) {
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);  // 创建 Blob 对象的 URL

            link.href = url;
            link.download = imageName;  // 设置文件名
            document.body.appendChild(link); // 将链接添加到文档中
            link.click();  // 模拟点击，触发下载
            document.body.removeChild(link); // 下载后移除链接

            // 释放 Blob URL
            URL.revokeObjectURL(url);
        });
    };

    img.src = imageUrl; // 设置图片来源
};

const onSelect = (item) => {
    showaction.value = false;
    if (item.name == '保存图片') {
        console.log(images.value[index.value], "images[index.value]");
        let donwherf = images.value[index.value]
        saveImage(donwherf, '下载图片');
        // showToast(item.name);
    }
};
let onSearch = () => {
    console.log(value.value);
    common.getfrendimg({ username: value.value }).then((res) => {
        console.log(res);
        imags.value = res.data;
        const groupedData = new Map();
        imags.value.forEach((item) => {
            // 获取当前对象的 imagedesp 值
            const descript = item.imagedesp;

            // 如果 map 中已经有这个 imagedesp 的条目，则添加到已有数组中
            if (groupedData.has(descript)) {
                groupedData.get(descript).push(item);
            } else {
                // 否则创建一个新的数组，并将当前对象加入
                groupedData.set(descript, [item]);
            }
        });

        // 将结果转换为数组形式
        console.log(groupedData.values(), 'groupedData.values()');
        const result = Array.from(groupedData.values());
        console.log(result, 'result');
        resimageList.value = result;
        console.log(resimageList.value, 'resimageList.value');
    });
};
let onClickButton = () => {
    common.getfrendimg({ username: value.value }).then((res) => {
        console.log(res);
        imags.value = res.data;
        const groupedData = new Map();
        imags.value.forEach((item) => {
            // 获取当前对象的 imagedesp 值
            const descript = item.imagedesp;

            // 如果 map 中已经有这个 imagedesp 的条目，则添加到已有数组中
            if (groupedData.has(descript)) {
                groupedData.get(descript).push(item);
            } else {
                // 否则创建一个新的数组，并将当前对象加入
                groupedData.set(descript, [item]);
            }
        });

        // 将结果转换为数组形式
        console.log(groupedData.values(), 'groupedData.values()');
        const result = Array.from(groupedData.values());
        console.log(result, 'result');
        resimageList.value = result;
        console.log(resimageList.value, 'resimageList.value');
    });
};
const onlongpress = (images) => {
    console.log("长按图片");
    showaction.value = true;
}
// Your script setup code here
</script>
<style scoped>
/* Your style code here */
</style>
